<template>
	<view class="container">
		<u-toast ref="uToast"></u-toast>
		<view class="navbar">
			<u-navbar leftIconColor="#fff" bgColor="rgba(255,255,255,0)" @leftClick="onHome" :autoBack="true">
				<view slot="center">
					<view class="title">余额提现</view>
				</view>
			</u-navbar>
		</view>
		<view class="header">
			<view class="bg"></view>
			<view class="withdrawal">
				<view class="top">
					<view class="label">账户余额：</view>
					<view class="money">￥{{ dealer.money }}</view>
				</view>
				<view class="bottom">
					<view class="label">提现金额：</view>
					<view class="input">
						<u--input v-model="form.money" type="digit" inputAlign="right" placeholder="请输入提现金额"
							border="none" clearable></u--input>
					</view>
				</view>
			</view>
		</view>
		<view class="tips" v-if="store.cash">
			<view class="text">最低提现金额 {{ store.cash.min_money }} 元</view>
		</view>
		<view class="submit" @click="submit">
			<view>
				<u-button shape="circle" text="立即提现" color="linear-gradient(180deg, #ff5e5e 0%, #F04A45 100%)">
				</u-button>
			</view>
		</view>
		<view class="block" v-if="store.cash">
			<view class="tool">
				<view class="head">
					<view class="icon">
						<u-icon size="22"
							name="https://img.alicdn.com/imgextra/i3/2064565174/O1CN01aOocPV1o5k28WrGIk_!!2064565174.png">
						</u-icon>
					</view>
					<view class="title">提现说明</view>
				</view>
				<view class="remarks">
					<view class="content">
						<u-parse :content="store.cash.explain"></u-parse>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		dealer,
		withdraw
	} from '@/api/dealer.js';
	import {
		config
	} from '@/api/system.js';
	import {
		detail
	} from '@/api/user.js';
	export default {
		data() {
			return {
				dealer: {},
				store: {},
				userInfo: {},
				form: {
					money: '',
					pay_type: 10
				}
			};
		},
		onShow() {
			this.getUser();
		},
		onLoad() {
			this.getStore();
		},
		methods: {
			onHome() {
				uni.redirectTo({
					url: '/pages/wallet/index/index'
				})
			},
			getDealer() {
				dealer({}).then(res => {
					this.dealer = res.data.dealer
				}).catch(err => {

				})
			},
			getStore() {
				let _this = this;
				config({
						key: 'dealer'
					})
					.then(res => {
						_this.store = res.data.config;
						_this.store.cash.explain = _this.store.cash.explain.replaceAll('\n', '<br>');
					})
					.catch(err => {});
			},
			getUser() {
				detail({})
					.then(res => {
						this.userInfo = res.data.userInfo;
						this.getDealer()
					})
					.catch(err => {});
			},
			submit() {
				let data = {};
				if (this.active == 0) {
					data = this.alipay;
				} else {
					data = this.bank;
				}
				withdraw(this.form)
					.then(res => {
						if (res.code == 1) {
							this.getUser();
							this.form.money = ''
							this.$refs.uToast.show({
								type: 'success',
								message: res.msg,
								complete() {
									uni.navigateBack()
								}
							});
						}
					})
					.catch(err => {});
			},
			onClickTabs(e) {
				this.active = e.index;
			}
		}
	};
</script>

<style lang="scss">
	page {
		width: 100%;
	}

	.navbar {
		.title {
			color: #fff;
		}
	}

	.submit {
		width: 92%;
		margin: 30rpx auto;
	}

	.block {
		width: 92%;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 15rpx;

		.tool {
			padding: 30rpx;

			.head {
				display: flex;
				flex-direction: row;
				align-items: center;

				.title {
					font-size: 24rpx;
					color: #333333;
					margin-left: 15rpx;
				}
			}

			.remarks {
				.content {
					font-size: 24rpx;
					margin-top: 15rpx;
				}
			}
		}
	}

	.tips {
		text-align: right;
		margin-top: 140rpx;
		font-size: 28rpx;
		margin-right: 60rpx;
		color: #666;
	}

	.header {
		width: 100%;
		position: relative;

		.withdrawal {
			width: 80%;
			background-color: #fff;
			position: absolute;
			bottom: -120rpx;
			left: 5%;
			border-radius: 10rpx;
			box-shadow: 0rpx 5rpx 15rpx #ccc;
			display: flex;
			flex-direction: column;
			padding: 30rpx;
			font-size: 28rpx;

			.top {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				border-bottom: 1rpx solid #f4f4f4;
				padding-bottom: 26rpx;

				.money {
					font-size: 32rpx;
					font-weight: bolder;
					color: #F04A45;
				}
			}

			.bottom {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding-top: 26rpx;

				input {
					text-align: right;
					text-align: end;
				}
			}
		}

		.bg {
			width: 100%;
			height: 320rpx;
			background: linear-gradient(180deg, #ff5e5e 0%, #F04A45 100%);
			background-repeat: no-repeat;
			background-size: cover;
		}
	}
</style>
